<template>
  <div class="app-container">
    <header class="header">
      <div class="header_left">
        <div class="breadcrumb">
          <span>
            <a>通知公告</a>
          </span>
        </div>
      </div>
    </header>
    <div style="height: 20px"></div>

    <div>
      <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-col :span="4" v-for=" item in list" :key="item.id">
          <el-card :body-style="{ padding: '0px' }" @click="getHtml(item)">
<!--            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image" >-->
            <div style="padding: 14px;" @click="getHtml(item)">
              <span>{{item.noticeTitle}}</span>
              <div class="bottom clearfix">
                <time class="time">{{ item.createTime }}</time>
                <el-tag v-if="item.noticeType==1">通知</el-tag>
                <el-tag v-if="item.noticeType==2" type="success">公告</el-tag>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <el-dialog
        :title="title"
        :visible.sync="centerDialogVisible"
        width="800px"
        center>
      <div v-html="a.noticeContent" ></div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>


import {getList} from "@/api/announce.js";

export default {
  data() {
    return {
      centerDialogVisible: false,
      list:[],
      a:{},
      title:"",
      currentDate: new Date()
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(){
      getList().then(response => {
        this.list = response.data
        console.log(this.list)
      })
    },
    getHtml(item){
      this.a = item;
      console.log(item)
      this.title = item.noticeType === "1" ? this.title = "通知" : "公告"
      this.centerDialogVisible = true;
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 10px 30px;

  .userInfo {
    display: flex;

  }

}
.breadcrumb {
  height: 40px;
  font-size: 18px;
  display: flex;
  align-items: center;
  font-weight: 600;
  color: rgb(37, 38, 43);
}
.header {
  display: flex;
  justify-content: space-between;

  .header_left {
    display: flex;
    justify-content: center;
    align-items: center;
  }}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

img{
  max-width: 300px;
}
</style>
